<template>
  <div class="ding-ding-container" :class="[`${prefixCls}`]">
    <div class="ding-header">
      <ul class="ding-menu-tab">
        <li :class="activeKey === 'editorOne' ? 'active' : ''" @click="dingLiClick('editorOne')"><a>方案一</a></li>
        <li :class="activeKey === 'editorTwo' ? 'active' : ''" @click="dingLiClick('editorTwo')"><a>方案二</a></li>
      </ul>
    </div>
    <div v-show="activeKey === 'editorOne'" class="base-collapse">
      <editor />
    </div>
    <div v-show="activeKey === 'editorTwo'" class="base-collapse">
      <editorTwo />
    </div>
  </div>
</template>
<script setup lang="ts" name="system-rechTextEditor">

  import { ref } from 'vue';

  import editor from './components/editor.vue';
  import editorTwo from './components/editorTwo.vue';

  import { useDesign } from '@/hooks/web/useDesign';
  const activeKey = ref('editorOne');
  const { prefixCls } = useDesign('j-dd-container');

  const dingLiClick = (key: string) => {
    activeKey.value = key;
  };
</script>



<style lang="less" scoped>
.ding-ding-container {
  border-radius: 4px;
  height: calc(100% - 80px);
  margin: 16px;
}
.ding-header {
  align-items: center;
  /*begin 兼容暗夜模式*/
  border-bottom: 1px solid @border-color-base;
  /*end 兼容暗夜模式*/
  box-sizing: border-box;
  display: flex;
  height: 50px;
  justify-content: space-between;
  padding: 0 24px;

  ul {
    margin-bottom: 0;
  }
}
.ding-menu-tab {
  display: flex;
  height: 100%;

  li {
    align-items: center;
    border-bottom: 2px solid transparent;
    display: flex;
    height: 100%;
    margin-right: 38px;

    a {
      /*begin 兼容暗夜模式*/
      color: @text-color !important;
      /*end 兼容暗夜模式*/
      font-size: 15px;
      font-weight: 700;
    }
  }
}
.active {
  border-bottom-color: #2196f3 !important;

  a {
    color: #333 !important;
  }
}
.empty-image{
  align-items: center;
  display: flex;
  flex-direction: column;
  height: calc(100% - 50px);
  justify-content: center;
  width: 100%;
}
</style>
